<template>
  <div class="relevance-order-wrap">
    <span class="border">{{ orders.length }} 单</span>
    <el-button class="btn" type="info" size="small" @click="handleOk">详情</el-button>
    <relevance-order-list-dialog ref="orderListDialog" @postMessage="selected" />
  </div>
</template>
<script>
import RelevanceOrderListDialog from './module/relevance-order-list-dialog';
export default {
  name: 'RelevanceOrder',
  components: { RelevanceOrderListDialog },
  props: {
    orders: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orderList: []
    };
  },
  watch: {
    orders(newVal) {
      this.orderList = newVal;
    }
  },
  methods: {
    handleOk() {
      this.$refs.orderListDialog.dialogVisible = true;
      this.$refs.orderListDialog.initData(this.orders);
    },
    selected(params) {
      this.orderList = params.relatedOrderOptions;
      this.$emit('postMessage', params);
    }
  }
};
</script>
<style lang="scss" scoped>
.relevance-order-wrap {
  display: flex;
  align-items: center;
  .border {
    width: 150px;
    height: 32px;
    border: 1px solid #DDDDDD;
    opacity: 1;
    border-radius: 2px;
    color: #333;
    padding: 0 10px;
    border-radius: 4px;
  }
  .btn {
    margin-left: 10px;
    width: 80px;
    font-size: 14px;
    height: 32px;
    padding: 0;
    background: #EFF3FB;
    border: 1px solid #EFF3FB;
    color: #406EFF;
  }
}
</style>
